<h2>widget对象</h2>
<h4 style="margin: 10px 0;">基于Canvas的基础控件对象</h4>
<p style="margin: 10px 0;"><strong>属性说明</strong></p>
<table class="table table-bordered">
	<thead>
		<th>名称</th>
		<th>说明</th>
	</thead>
	<tbody>
		<tr>
			<td>name</td>
			<td>
				<p><strong>类型： </strong>String</p>
				<p><strong>作用： </strong>设置控件唯一的name值，默认值为"widget"</p>
			</td>
		</tr>
		<tr>
			<td>type</td>
			<td>
				<p><strong>类型： </strong>String</p>
				<p><strong>作用： </strong>设置控件的类型，默认为“widgets”，不更改</p>
			</td>
		</tr>
		<tr>
			<td>text</td>
			<td>
				<p><strong>类型： </strong>String</p>
				<p><strong>作用： </strong>设置标注控件的“text”值，在控件内部显示</p>
			</td>
		</tr>
		<tr>
			<td>x</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件在画布上显示的x轴的坐标值</p>
			</td>
		</tr>
		<tr>
			<td>y</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件在画布上显示的y轴的坐标值</p>
			</td>
		</tr>
		<tr>
			<td>width</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的宽度,默认值为275,单位为PX</p>
			</td>
		</tr>
		<tr>
			<td>height</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的高度,默认值为140,单位为PX</p>
			</td>
		</tr>
		<tr>
			<td>minwidth</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的最小宽度，默认值为36，单位为PX</p>
			</td>
		</tr>
		<tr>
			<td>minheight</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的最小高度，默认值为36，单位为PX</p>
			</td>
		</tr>
		<tr>
			<td>alpha</td>
			<td>
				<p><strong>类型： </strong>float</p>
				<p><strong>作用： </strong>设置控件的透明度 ，范围为0~1 ，可以是小数，如0.2,默认值为1，不透明</p>
			</td>
		</tr>
		<tr>
			<td>editable</td>
			<td>
				<p><strong>类型： </strong>boolean</p>
				<p><strong>作用： </strong>设置控件是否可编辑，默认为false</p>
			</td>
		</tr>
		<tr>
			<td>visible</td>
			<td>
				<p><strong>类型： </strong>boolean</p>
				<p><strong>作用： </strong>设置控件是否在画布上可见，默认为true</p>
			</td>
		</tr>
		<tr>
			<td>scaleX</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的水平伸缩比例,默认值为1</p>
			</td>
		</tr>
		<tr>
			<td>scaleY</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的垂直伸缩比例,默认值为1</p>
			</td>
		</tr>
		<tr>
			<td>scale</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的伸缩比例,默认值为1</p>
			</td>
		</tr>
		<tr>
			<td>margin</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的外边距，默认值为5，单位是PX</p>
			</td>
		</tr>
		<tr>
			<td>rotate</td>
			<td>
				<p><strong>类型： </strong>int</p>
				<p><strong>作用： </strong>设置控件的旋转角度，默认值为0</p>
			</td>
		</tr>
		<tr>
			<td>rotatepoint</td>
			<td>
				<p><strong>作用： </strong>设置旋转点的位置和偏移的距离,其中x,y为坐标位置值，offsetx和offsety分别设置控件在水平和垂直方向偏移的距离</p>
				<p><strong>默认值： </strong>
					<pre><code>
rotatepoint: {
    x: 0,
    y: 0,
    offsetx: 0,
    offsety: 0
},
				</code></pre>
				</p>
			</td>
		</tr>
		<tr>
			<td>background</td>
			<td>
				<p><strong>作用： </strong> 设置控件背景，其中"filltype"为填充方式，共有4种，分别为： <br>
					1、none--无填充； <br> 2、color--颜色填充； <br>3、gradient--渐变色填充； <br>4、image--图片填充 。<br>默认值为：</p>
				<pre>
					<code>
background: {
	filltype:"color",
	color : "#ABABAB"
},
					</code>
				</pre>
				<p><strong>其他用法： </strong></p>
				<p>1、gradient-渐变色填充,结合另一个属性“gradient”来设置，详见下一个属性“gradient”
					<pre>
					<code>
background: {
	filltype: "gradient"
},
gradient: {
	type: "liner",
	begincolor: "white",
	endcolor: "gray",
	angle: 90
},
					</code>
				</pre></p>
				<p>2、image-图片填充，其中，“image”为图片路径，“imageType”为图片填充方式，共4种，分别为：<br> （1）repeat-按照原比例重复图片；<br>
				（2）center-显示图片中心部分；<br>（3）fit-自适应画布大小，保留边框；<br>（4）fill-图片按比例填满画布。<br>
					<pre>
					<code>
background: {
	filltype: "image",
	image: "xxx.jpg",
	imageType: "fill"
}					
					</code>
				</pre></p>
				<p><strong>默认值： </strong>
					<pre><code>
background: {
    filltype:"color",
    color : "none",
    image : null,
    imageType : "center"
},
				</code></pre>
				</p>
			</td>
		</tr>
		<tr>
			<td>gradient</td>
			<td>
				<p><strong>作用：</strong>当背景的filltype为渐变色gradient时，设置gradient的属性。
					渐变的方式有3种，分别为:<br>1、none-无;<br>2、liner-线性；<br>3、radial-径向；<br>
					可根据需求设置对应的开始颜色“begincolor”和结束颜色“endcolor”；“angle”为线性渐变的角度，
					只对线性渐变方式有作用；“radius”为径向渐变中中心圆的半径大小，只对径向渐变方式有作用。
				</p>
				<p><strong>用法(默认值)：</strong>
				<pre>
					<code>
gradient: {
	type: "liner",
	begincolor: "white",
	endcolor: "gray",
	angle: 90,
	radius: 45
},
  					</code>
				</pre></p>
			</td>
		</tr>
		<tr>
			<td>border</td>
			<td>
				<p><strong>作用：</strong>设置画布的边框，共有三个属性，其中“width”用于设置边框宽度，
					单位默认为PX；“color”用于设置边框的颜色，“type”用于设置边框的样式，共有3种，分别为：<br>
					1、solid--实线；<br> 2、dotted--点状线；<br>3、dashed--虚线。</p>
				<p><strong>用法：</strong>
				<pre>
					<code>
border: {
	width: 1,
	type: "solid",
	color: "red"
},
					</code>	
				</pre></p>
			</td>
		</tr>
		
		<tr>
			<td>corner</td>
			<td>
				<p><strong>作用： </strong>设置控件边框的形状，共有两种，分别为：<br>1、round--圆角；<br>2、rect--方角。<br> 其中，“radius”属性为设置圆角的半径，当type为round时才起作用。
				</p>
				<p><strong>默认值： </strong>
					<pre><code>
corner: {
    type:"rect",
    radius:16
},
				</code></pre>
				</p>
			</td>
		</tr>
		<tr>
			<td>shadow</td>
			<td>
				<p><strong>作用： </strong>给控件添加阴影效果，有下列几个属性：
				</p>
				<table class="table table-bordered">
					<thead>
						<th>属性名</th>
						<th>类型</th>
						<th>说明</th>
					</thead>
					<tbody>
						<tr>
							<td>color</td>
							<td>String</td>
							<td>设置阴影颜色</td>
						</tr>
						<tr>
							<td>offsetX</td>
							<td>int</td>
							<td>设置阴影水平偏移的距离，正值即为向右偏移，负值则相反</td>
						</tr>
						<tr>
							<td>offsetY</td>
							<td>int</td>
							<td>设置阴影垂直偏移的距离，正值即向下偏移，负值则相反</td>
						</tr>
						<tr>
							<td>blur</td>
							<td>int</td>
							<td>设置阴影的模糊程度，其值不能为负值，值越大，阴影越模糊，反之越清晰，不需要阴影模糊可以将其值设为0</td>
						</tr>
					</tbody>
				</table>
				<p><strong>默认值： </strong>
					<pre><code>
shadow: {
    color : "none",
    offsetX : 4,
    offsetY : 4,
    blur : 4
},
				</code></pre>
				</p>
			</td>
		</tr>
		<tr>
			<td>font</td>
			<td>
				<p><strong>作用： </strong>给控件设置显示的字体样式，有下列属性：</p>
				<table class="table table-bordered">
					<thead>
						<th>属性名</th>
						<th>类型</th>
						<th>说明</th>
					</thead>
					<tbody>
						<tr>
							<td>style</td>
							<td>String</td>
							<td>设置字体样式，分为“normal”正常和“italic”斜体</td>
						</tr>
						<tr>
							<td>weight</td>
							<td>String</td>
							<td>设置字体粗细程度，分为“normal”正常和“bold”粗体</td>
						</tr>
						<tr>
							<td>family</td>
							<td>String</td>
							<td>设置显示的字体名</td>
						</tr>
						<tr>
							<td>size</td>
							<td>String</td>
							<td>设置字体大小,单位为PT</td>
						</tr>
						<tr>
							<td>color</td>
							<td>String</td>
							<td>设置字体颜色</td>
						</tr>
						<tr>
							<td>fill</td>
							<td>boolean</td>
							<td>设置文字是空心还是实心，默认为true,实心</td>
						</tr>
					</tbody>
				</table>
				<p><strong>默认值： </strong>
					<pre><code>
font: {
    style: "normal",
    weight: "normal",
    family: "Arial",
    size: "10pt",
    color: "black",
    fill: true
},
				</code></pre>
				</p>
			</td>
		</tr>

	</tbody>
</table>

<p style="float: right;font-size: 14px;margin-top: 20px;">
	<strong>自己动手试一试</strong>&nbsp;&nbsp;<img src="./img/finger.png">
</p>